<template>
    <div class="callingList" :style="homeTaskbarWidth !== '520px' ? 'overflow-x: scroll;' : ''">
        <div class="table_header">
            <ul>
                <li class="w-[10%] fontWe">
                    <el-tooltip effect="dark" :content="t('home.cargoLocation')" placement="top">
                        {{ t('home.cargoLocation') }}
                    </el-tooltip>
                </li>
                <li class="w-[12%] fontWe">
                    <el-tooltip effect="dark" :content="t('home.cargoLocation')" placement="top">
                        {{ t('home.status') }}
                    </el-tooltip>
                </li>
                <li class="w-[10%] fontWe">
                    <el-tooltip effect="dark" :content="t('home.operation')" placement="top">
                        {{ t('home.operation') }}
                    </el-tooltip>
                </li>
                <li class="w-[43%] fontWe">
                    <el-tooltip effect="dark" :content="t('home.generateMission')" placement="top">
                        {{ t('home.generateMission') }}
                    </el-tooltip>
                </li>
                <li class="w-[25%] fontWe">
                    <el-tooltip effect="dark" :content="t('home.callTime')" placement="top">
                        {{ t('home.callTime') }}
                    </el-tooltip>
                </li>
            </ul>
        </div>
        <div class="table_cn">
            <ul v-for="v in CallNewData" :key="v.id">
                <!-- 协议地址 -->
                <!-- <li class="w-[30%]">{{ v.address }}</li> -->
                <!-- 货位 -->
                <li class="w-[10%]">{{ v.loc }}</li>
                <!-- 状态 -->
                <li :class="[StateColor(v.status), 'w-[12%]']" class="fontText">
                    <el-tooltip effect="dark" :content=formatState(v.status) placement="top">
                        {{ formatState(v.status) }}
                    </el-tooltip>
                </li>
                <!-- 操作 -->
                <li class="w-[10.1%]">
                    <el-button type="danger" size="small" link v-show="v.status === 1" @click="cleanup(v)">
                        {{ t('home.clear') }}
                    </el-button>
                    <el-button type="primary" size="small" link v-show="v.status === 0" @click="callout(v)">
                        {{ t('home.call') }}
                    </el-button>
                </li>
                <!-- 生成任务 -->
                <li class="w-[43.1%]">{{ v.taskcode || t('home.noMission') }}</li>
                <!-- 呼叫时间 -->
                <li class="w-[25%]">{{ v.status === 1 ? formatDate(v.tasktime) : t('home.none') }}</li>
            </ul>
        </div>
    </div>
</template>

<script lang='ts' setup>
import { ref, watch } from 'vue';
import { websock } from '@/utils/webScoket'
import { ElMessageBox } from 'element-plus'
import { message } from "@/utils/message"; import { useNav } from "@/layout/hooks/useNav";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const { homeTaskbarWidth } = useNav()

const props = defineProps({
    CallData: {
        // 指定该属性的类型为任意类型的数组
        type: Array<any>,
        // 指定该属性为必填项，即在使用该组件时必须提供该属性
        required: true,
        // 指定该属性的默认值为一个包含一个空对象的数组
        // 当未提供该属性时，将使用此默认值
        default: [{}]
    }
})

let CallNewData = ref(null)
watch(() => props.CallData, (val) => {
    // console.log('最新消息=>', val);
    // 使用 filter 方法将数组分为两部分：status 为 1 的和 status 不为 1 的
    let status1Items = val.filter(item => item.status === 1);// 有信号
    let otherItems = val.filter(item => item.status !== 1);// 无信号
    otherItems.sort((a, b) => {
        if (a.loc < b.loc) {
            return -1; // 如果 a.loc 在字母顺序上小于 b.loc，则 a 应该排在 b 前面
        }
        if (a.loc > b.loc) {
            return 1; // 如果 a.loc 在字母顺序上大于 b.loc，则 b 应该排在 a 前面
        }
        return 0; // 如果 a.loc 和 b.loc 相等，则它们的顺序不变
    });
    // 合并两个数组，status 为 1 的在前
    CallNewData.value = [...status1Items, ...otherItems];
})

// 状态
function formatState(status) {
    const stateMap = {
        0: t('home.noSignal'),
        1: t('home.hasSignal'),
        2: t('home.offline')
    }
    return stateMap[status]
}

// 状态
function StateColor(status) {
    const stateMap = {
        0: 'warning',
        1: 'success',
        2: 'info'
    }
    return stateMap[status]
}

// 清除
function cleanup(val) {
    ElMessageBox.confirm(
        `是否确认清除该数据项?`,
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
            center: true,
        }
    ).then(() => {
        websock.send(JSON.stringify({ type: '呼叫', agvid: val.id, data: 0 }));
        message(`提交成功`, { type: "success" });
    }).catch(() => { })
}

// 呼叫
function callout(val) {
    ElMessageBox.confirm(
        `是否确认呼叫该数据项?`,
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
            center: true,
        }
    ).then(() => {
        websock.send(JSON.stringify({ type: '呼叫', agvid: val.id, data: 1 }));
        message(`提交成功`, { type: "success" });
    }).catch(() => { })
}

// 自定义格式化时间函数
function formatDate(isoDateString) {
    let date = new Date(isoDateString)
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');  // 月份从0开始，所以需要+1
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    const seconds = String(date.getSeconds()).padStart(2, '0');
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

</script>

<style lang="scss" scoped>
.callingList {
    // x轴滚动条
    // overflow-x: scroll;
    box-sizing: border-box;
    margin-top: 5px;
    height: calc(100% - 5px);
    border: 1px solid #5a9cf8;
}

.table_header,
.table_cn {
    width: 490px;

    ul {
        //x轴不换行
        white-space: nowrap;
        border-bottom: 1px solid #5a9cf8;
        font-size: 0;

        li {
            display: inline-block;
            color: white;
            font-size: 14px;
            height: 100%;
            text-align: center;
            border-right: 1px solid #5a9cf8;
            line-height: 25px;

            &:nth-last-child(1) {
                border: none;
            }
        }
    }
}

.table_cn {
    overflow-y: scroll;
    height: calc(100% - 26px);

    &::-webkit-scrollbar {
        width: 2px;
        height: 1px;
    }

    &::-webkit-scrollbar-thumb {
        //滑块部分
        border-radius: 5px;
        background-color: #267f9c;
    }

    &::-webkit-scrollbar-track {
        //轨道部分
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #2862b7;
        border-radius: 5px;
    }
}

.table_cn li {
    font-size: 12px !important;

    .el-button {
        margin-left: 0;
    }
}

.fontWe {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fontText {
    // overflow: hidden;
}

.warning {
    color: white !important;
}

.success {
    color: #7ec050 !important;
}

.info {
    color: #919398 !important;
}
</style>